<template>
  <div class="main-content-wrapper">
    <a-row :gutter="24">

      <a-col :span="6">
        <div class="filters-panel">

          <h3 class="filter-title">语言配置</h3>
          <a-menu mode="inline" :selectable="false" class="filter-menu">
            <a-input-search placeholder="Q 搜索..." style="margin-bottom: 8px;" />

            <a-menu-item key="f_java">Java <span class="count">695</span></a-menu-item>
            <a-menu-item key="f_csharp">C# <span class="count">450</span></a-menu-item>
            <a-menu-item key="f_typescript">TypeScript <span class="count">424</span></a-menu-item>
            <a-menu-item key="f_javascript">JavaScript <span class="count">407</span></a-menu-item>
            <a-menu-item key="f_python">iPython Notebooks <span class="count">351</span></a-menu-item>
            <div class="menu-footer">5 显示更多</div>
          </a-menu>

          <a-divider />

          <h3 class="filter-title">软件质量</h3>
          <a-menu mode="inline" :selectable="false" class="filter-menu">
            <a-menu-item key="d_soft">安全 <span class="count">261</span></a-menu-item>
            <a-menu-item key="d_real">可维护性 <span class="count">1K</span></a-menu-item>
            <a-menu-item key="d_reliability">可靠性 <span class="count">2.4K</span></a-menu-item>
          </a-menu>

          <a-divider />

          <h3 class="filter-title">安全热点</h3>
          <a-menu mode="inline" :selectable="false" class="filter-menu">
            <a-menu-item key="p_web">只显示安全热点 <span class="count">275</span></a-menu-item>
            <a-menu-item key="p_other">其他 <span class="count">650</span></a-menu-item>
          </a-menu>

        </div>
      </a-col>

      <a-col :span="18">
        <div class="list-panel">
          <div class="list-header">
            <a-input-search
                v-model:value="searchText"
                placeholder="Q 搜索规则、缺陷..."
                style="width: 300px; margin-right: 16px;"
                allow-clear
            />

            <a-dropdown style="margin-right: 8px;">
              <a-button>
                规则属性 <down-outlined />
              </a-button>
              <template #overlay>
                <a-menu @click="handleMenuClick">
                  <a-menu-item key="1">
                    <UserOutlined />
                    1st menu item
                  </a-menu-item>
                  <a-menu-item key="2">
                    <UserOutlined />
                    2nd menu item
                  </a-menu-item>
                  <a-menu-item key="3">
                    <UserOutlined />
                    3rd item
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
            <a-dropdown style="margin-right: 8px;">
              <a-button>
                时间 <down-outlined />
              </a-button>
              <template #overlay>
                <a-menu @click="handleMenuClick">
                  <a-menu-item key="1">
                    <UserOutlined />
                    1st menu item
                  </a-menu-item>
                  <a-menu-item key="2">
                    <UserOutlined />
                    2nd menu item
                  </a-menu-item>
                  <a-menu-item key="3">
                    <UserOutlined />
                    3rd item
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>

            <span class="result-count"> {{pagination.total}} 规则 </span>
          </div>

          <a-spin :spinning="loading">
            <a-list item-layout="horizontal" :data-source="ruleData" class="rule-list">
              <template #renderItem="{ item }">
                <a-list-item>
                  <a-list-item-meta>
                    <template #title>
                      <a>{{ item.name }}</a>
                    </template>
                  </a-list-item-meta>

                  <template #actions>
                    <div class="list-actions">
                      <div class="language-tag">{{ item.language }}</div>
                      <div class="detail-label">{{ item.status }}</div>
                    </div>
                  </template>
                </a-list-item>
              </template>
            </a-list>
          </a-spin>

          <div style="text-align: center; margin-top: 24px;">
            <a-pagination :default-current="1" :total="pagination.total" :page-size="pagination.pageSize"/>
          </div>

        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import { DownOutlined } from '@ant-design/icons-vue';
import axios from "axios";
import LocalStorageKeyConst from '/@/constants/local-storage-key-const.js';

const loading = ref(true); // 初始加载状态
const searchText = ref('');// 搜索文本

// 定义分页对象
const pagination = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0,
  pages: 0
});

let ruleData = [];//规则数据，json

// 添加获取 token 的函数
function getToken() {
  return localStorage.getItem(LocalStorageKeyConst.USER_TOKEN);
}

// 检查是否登录
function checkLogin() {
  const token = getToken();
  if (!token) {
    console.error('未登录，请先登录');
    // router.push('/login');
    return false;
  }
  return true;
}

// 修改 getRules 函数，添加 token 验证
async function getRules() {
  loading.value = true;
  // 检查是否登录
  if (!checkLogin()) return;
  // 获取 token
  const token = getToken();

  try {
    // 发送请求时带上 token
    const res = await axios({
      url: 'http://localhost:1025/rule/query',
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${token}`, // 添加认证头
        'Content-Type': 'application/json'
      },
      data: {
        pageNum: pagination.value.pageNum,
        pageSize: pagination.value.pageSize,
        searchCount: true,
        sortItemList: [], // 必须为空数组
        status: "READY", // 使用有效状态值
        language: "java" // 使用有效语言值
      }
    });

    // 设置规则数据
    ruleData = res.data.data.list;
    pagination.value.total = res.data.data.total;
    pagination.value.pages = res.data.data.pages;
    // console.log('ruleData is: ',ruleData);

  } catch (error) {
    console.error('获取规则失败:', error);
    // 如果 token 过期，清除 token
    if (error.response?.status === 401) {
      localStorage.removeItem(LocalStorageKeyConst.USER_TOKEN);
      console.log('Token已过期，请重新登录');
    }
  }
  finally {
    loading.value = false;
  }
}

// 页面加载时自动获取规则
onMounted(() => {
  getRules();
  // console.log('当前Token:', getToken());
});
</script>


<style scoped>
/* 整个内容区的容器 */
.main-content-wrapper {
  padding: 24px;
  background-color: #f0f2f5; /* Ant Design 默认背景色 */
  min-height: calc(100vh - 48px); /* 假设没有顶栏和底栏，填满视口高度 */
}

/* 左侧筛选器面板 */
.filters-panel {
  background: #fff;
  padding: 16px;
  border-radius: 4px;
}
.filter-title {
  font-size: 14px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.88);
  margin-top: 16px;
  margin-bottom: 8px;
}
.filter-title:first-child {
  margin-top: 0;
}
.filter-menu {
  border-right: none;
}
.filter-menu :deep(.ant-menu-item) {
  padding-left: 0 !important;
  height: 32px;
  line-height: 32px;
}
.filter-menu .count {
  float: right;
  color: rgba(0, 0, 0, 0.45);
}
.menu-footer {
  padding: 8px 0;
  color: #1890ff; /* 蓝色链接 */
  cursor: pointer;
  font-size: 12px;
}

/* 右侧列表面板 */
.list-panel {
  background: #fff;
  padding: 16px;
  border-radius: 4px;
}

.list-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}
.result-count {
  margin-left: auto;
  color: rgba(0, 0, 0, 0.65);
}

/* 规则列表样式 */
.rule-list {
  padding: 0;
}
.rule-list :deep(.ant-list-item-meta-title) a {
  font-weight: 500;
  font-size: 15px;
}

.list-actions {
  text-align: right;
  min-width: 120px; /* 确保右侧对齐 */
}
.language-tag {
  /* 右侧技术栈 */
  color: #1890ff;
  font-weight: 500;
}
.detail-label {
  color: rgba(0, 0, 0, 0.45);
  font-size: 12px;
  margin-top: 4px;
}
</style>